<template>
  <form action="/">
    <van-search
      v-model="searchOptions.searchKey"
      show-action
      shape="round"
      :placeholder="searchOptions.placeholder"
      @search="searchOptions.handleSearch"
      @clear="searchOptions.handleClear"
    >
      <template #action>
        <div
          class="filter-box"
          @click="searchOptions.handleFilter"
        >
          <i class="iconfont iconshaixuan"></i>
          <span>筛选</span>
        </div>
      </template>
    </van-search>
  </form>
</template>

<script>
import { Search } from 'vant';
export default {
  name: 'SearchFilter',
  components: {
    [Search.name]: Search
  },
  props: {
    searchOptions: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      searchKey: ''
    };
  },
  methods: {
    onSearch() {
      console.log('onSearch');
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-box {
  display: flex;
  align-items: center;
  font-size: 0.373333rem;
  color: #666666;

  i {
    margin-right: 0.053333rem;
  }
}
</style>